import React, { useEffect, useState } from "react";
import { Image, message, Button } from "antd";
import { getMovies } from "../ajax";
import { Link} from "react-router-dom";
import "./page_content.css"

export default function Content() {
    return (
        <div className="page_content">
            <div style={{width: 750}}>
                <HotMovie />
            </div>
            <div>

            </div>
        </div>
    )
}


function HotMovie() {
    const [movies, setMovies] = useState([]);
    useEffect(() => {
        const get = async () => {
            const data = await getMovies();
            if (!data.status && data.data) {
                setMovies(data.data.dataSource);
            } else {
                message.error(data.msg)
            }
        }
        get();
    }, []);
    return (
        <div>
            <div className="flex hot-head">
                <div className="hot-title">正在热映</div>
                <div className="all-link"><Link to="./movieIndex">全部</Link></div>
            </div>
            <div className="flex hot-body">
                {setMovieCards(movies)}
            </div>
        </div>
    )
}

export function setMovieCards(movies) {
    return movies.map((value) => {
        return <MovieCard movie={value} key={value.mid} />
    })
}


export function MovieCard(props) {
    const movie = props.movie ? props.movie : {};
    const path = {
        pathname: "/index/movie_detail",
        state: {
            movie: movie,
        }
    }
    const save = () => {
        sessionStorage.setItem("click-movie", JSON.stringify(movie));
    }
    return (
        <div className="movie-card-box">
            <Link onClick={save} to={path}>
                <div style={{position: "relative"}}>
                    <Image
                        width={160}
                        height={220}
                        src={movie.cover ? movie.cover : "error"}
                        preview={false}
                        fallback=""
                    />
                    <div className="movie-inform">
                        <div className="movie-box-title">{movie.title}</div>
                        <i className="movie-rate">{movie.rate}</i>
                    </div>
                </div>

            </Link>
            <Button type="primary" block style={{ marginTop: -1 }}><Link onClick={save} to={path}>立即购票</Link></Button>
        </div>
    )
}

{
    ticketID,
    row,
    col,
    ticketStatus
}